<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站首页</title>
    <link rel="stylesheet" href="css/tt.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="top">
    <span class="top-left">下载APP</span>
    <span class="top-left"> 北京         晴天</span>
    <span class="top-right">更多产品</span>
</div>

<div class="container">

    <div class="left">
        <a>
            <img src="img/logo.png"><br/>
        </a>

        <ul>
            <li>
                <a class="channel-item active" href="#">
                    <span>
                        推荐
                    </span>
                </a>
            </li>

            <li><a class="channel-item" href="#">
                <span>
                    视频
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    热点
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    直播
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    图片
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    娱乐
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    游戏
                </span>
            </a></li>

            <li><a class="channel-item" href="#">
                <span>
                    体育
                </span>
            </a></li>

        </ul>

    </div>
    <div class="center">
        <ul class="news_list">
            <!--<li>
                <div class="title-box">
                    <a href="#" class="link">
                        奥巴马罕见介入美国2020大选，警告民主党参选人须“基于现实11”
                        <hr>
                    </a>
                </div>
            </li>-->
        </ul>

		<div class="content">
            <div class="pagination-holder clearfix">
                <div id="light-pagination" class="pagination"></div>
            </div>
        </div>

    </div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/pagination.min.js"></script>

<script>
    //页面加载完成函数
    $(function (){
        //发送异步请求，默认获取第1页10条数据
        pageQuery(1,10);
    })

    function pageQuery(currPage,pageSize){
        $.ajax({
            url:"newsServlet",
            data: {currentPage:currPage,pageSize:pageSize},
            type:"get",
            dataType:"json",
            success:function (pageInfo){
                //处理响应结果
                //1 展示新闻条目------------------------------------------
                let lis=``;
                //1.1 遍历新闻数据，有多少条数据就拼接多少个li
                for(let i=0;i<pageInfo.list.length;i++){
                    lis+=`<li>
                            <div class="title-box">
                                <a href="#" class="link">
                                      ${pageInfo.list[i].title}
                                    <hr>
                                </a>
                            </div>
                        </li>`;
                }
                //1.2 将拼接的li标签添加到<ul class="news_list">里面
                $(".news_list").html(lis);

                //2 展示分页条-------------------------------------------
                $("#light-pagination").pagination({
                    pageSizeOpt: [
                        {'value': 10, 'text': '10条/页','selected': true},
                        {'value': 15, 'text': '15条/页'},
                        {'value': 20, 'text': '20条/页'}
                    ],
                    totalPage: pageInfo.pages,
                    showPageNum: 5,
                    firstPage: '首页',
                    previousPage: '上一页',
                    nextPage: '下一页',
                    lastPage: '尾页',
                    skip: '跳至',
                    confirm: '确认',
                    refresh: '刷新',
                    totalPageText: '共{}页',
                    isShowFL: true,
                    isShowPageSizeOpt: true,
                    isShowSkip: false,
                    isShowRefresh: false,
                    isShowTotalPage: false,
                    isResetPage: false,
                    callBack: function (currPage, pageSize) {
                        //点击分页条的任何按钮都会执行此方法
                        console.log('currPage:' + currPage + '     pageSize:' + pageSize);
                        //向服务器发送请求，把currPage和pageSize发送给服务器
                        pageQuery(currPage,pageSize);
                    }
                });
                //3 让窗体的滚动条滚动到最上方
                window.scrollTo(0,0);
            }
        });
    }
</script>

</html>